<template>
	<view class="title-box" :class="customClass">
		<view class="common-title">
			<template v-if="icon">
				<u-icon :name="icon" :color="tagColor" :size="tagSize" :width="tagWidth" :height="tagHeight"></u-icon>
			</template>
			<template v-if="!icon">
				<view class="tag" :style="{backgroundColor:tagColor,width:tagWidth,height:tagHeight}"></view>
			</template>

			<view class="title" :style="{color:color,fontSize:size}">{{title}}<text class="ml4 c-danger"
					v-if="isRequire">*</text></view>
		</view>
		<view class="other">
			<slot name="other"></slot>
		</view>
	</view>
</template>

<script>
	import UIcon from "../../uview-ui/components/u-icon/u-icon";
	export default {
		name: "title-bar",
		components: {
			UIcon
		},
		props: {
			tagColor: {
				type: String,
				default: '#06B7F3'
			},
			isRequire: {
				type: Boolean,
				default: false
			},
			tagSize: {
				type: String | Number,
				default: '24rpx'
			},

			tagWidth: {
				type: String | Number,
				default: '5rpx'
			},

			tagHeight: {
				type: String | Number,
				default: '24rpx'
			},

			icon: {
				type: String,
				default: ''
			},

			color: {
				type: String,
				default: '#333333'
			},

			size: {
				type: String | Number,
				default: '24rpx'
			},

			custClass: {
				type: String | Array,
				default () {
					return []
				},
			},

			title: {
				type: String,
				default: ''
			},
		}
	}
</script>

<style lang="scss" scoped>
	.title-box {
		display: flex;
		justify-content: space-between;
		padding: 20rpx 0;
		box-sizing: border-box;
		align-items: baseline;

		.common-title {
			display: flex;
			align-items: center;

			.tag {
				width: 5rpx;
				height: 24rpx;
				margin-right: 10rpx;
			}

			.title {
				font-weight: bold;
			}
		}

	}
</style>
